<!-- 账户汇总 -->
<template>
  <a-card :bordered="false" class="br-10">
    <div class="_header _pb-20">
      <div class="search-box">
        <span class="label">数据统计</span>
        <a-select v-model="datetype" class="select">
          <a-select-option v-for="item in dateOptions" :value="item.value" :key="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
      </div>
      <div class="num-box">
        <div class="item">
          <span class="k">付款订单数（笔）</span>
          <span class="v">{{ dataInfo.playNum }}</span>
        </div>
        <div class="item">
          <span class="k">
            <span>付款预估收益</span>
            <span class="tooltip">
              <a-tooltip>
                <template slot="title">指已支付成功订单，按照分润比例预计收益（包含未完成和已分账的订单）</template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </span>
          </span>
          <span class="v">￥{{ dataInfo.income }}</span>
        </div>
        <div class="item">
          <span class="k">
            <span>结算收益</span>
            <span class="tooltip">
              <a-tooltip>
                <template slot="title">指订单已完成后的分账完成的收益，该收益预计在明天会自动到您的银行卡</template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </span>
          </span>
          <span class="v">￥{{ dataInfo.settleAmount }}</span>
        </div>
      </div>
    </div>

    <a-card
      style="width: 100%"
      :tab-list="tabListNoTitle"
      :active-tab-key="titleKey"
      @tabChange="(key) => onTabChange(key)"
    >
      <div v-if="titleKey === 'payment'">
        <PaymentIncomeDetail />
      </div>
      <div v-else-if="titleKey === 'settlement'">
        <SettlementIncomeDetail />
      </div>
    </a-card>
  </a-card>
</template>

<script>
import PaymentIncomeDetail from './components/paymentIncomeDetail.vue'
import SettlementIncomeDetail from './components/settlementIncomeDetail.vue'
import { ticketDataReport } from '@/api/finance/finance'
export default {
  components: {
    PaymentIncomeDetail,
    SettlementIncomeDetail,
  },
  data() {
    return {
      datetype: 1,
      dateOptions: [
        { label: '今日', value: 1 },
        { label: '昨日', value: 2 },
        { label: '近7日', value: 3 },
        { label: '近30日', value: 4 },
        { label: '本月', value: 5 },
      ],
      tabListNoTitle: [
        {
          key: 'payment',
          tab: '付款预估收益明细',
        },
        {
          key: 'settlement',
          tab: '结算收益明细',
        },
      ],
      titleKey: 'payment',
      dataInfo: {},
    }
  },
  watch: {
    datetype() {
      this.getDataReport()
    },
  },
  created() {
    this.getDataReport()
  },
  methods: {
    async getDataReport() {
      let res = await ticketDataReport(this.datetype)
      this.dataInfo = res.data || {}
    },
    onTabChange(key) {
      this.titleKey = key
    },
  },
}
</script>
<style scoped lang="less">
._header {
  .search-box {
    display: flex;
    align-items: center;
    .label {
      font-size: 16px;
      font-weight: bold;
    }
    .select {
      width: 120px;
      margin-left: 10px;
    }
  }
  .num-box {
    display: flex;
    justify-content: space-between;
    width: 60%;
    margin-top: 20px;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .k {
        font-size: 16px;
        .tooltip {
          margin-left: 10px;
        }
      }
      .v {
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;
      }
    }
    .item:not(:last-child) {
      border-right: 2px #eee solid;
    }
  }
}
</style>
